
<div style="POSITION: relative" id="content">
  <h3>easyUI 我的第一个window</h3>
  <div id="article_content" class="article_content">
    <p>创建一个window 非常简单,我们创建一个DIV标记.
    <pre name="code" class="html">&lt;div id=&quot;win&quot; class=&quot;easyui-window&quot; title=&quot;My Window&quot; style=&quot;width:300px;height:100px;padding:5px;&quot;&gt;  
    Some Content.  
&lt;/div&gt;  </pre>
    现在运行你的测试页面,你会看见一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">window 显示在你的屏幕上,我们不需要写任何的javascript代码.</span>
    </p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344673534_2596.png" alt=""><br>
      </span></p>
    <p style="text-align:left">如果你希望创建一个隐藏的window,记得设置'closed'属性为true值,你可以调用'open' 方法来打开一个window.
    <pre name="code" class="html">&lt;div id=&quot;win&quot; class=&quot;easyui-window&quot; title=&quot;My Window&quot; closed=&quot;true&quot; style=&quot;width:300px;height:100px;padding:5px;&quot;&gt;  
    Some Content.  
&lt;/div&gt;  </pre>
    <pre name="code" class="javascript">$('#win').window('open');  </pre>
    最为最后的示例我们创建一个登录窗体:
    </p>
    <p style="text-align:left">
    <pre name="code" class="html">&lt;div id=&quot;win&quot; class=&quot;easyui-window&quot; title=&quot;Login&quot; style=&quot;width:300px;height:180px;&quot;&gt;  
    &lt;form style=&quot;padding:10px 20px 10px 40px;&quot;&gt;  
        &lt;p&gt;Name: &lt;input type=&quot;text&quot;&gt;&lt;/p&gt;  
        &lt;p&gt;Pass: &lt;input type=&quot;password&quot;&gt;&lt;/p&gt;  
        &lt;div style=&quot;padding:5px;text-align:center;&quot;&gt;  
            &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; icon=&quot;icon-ok&quot;&gt;Ok&lt;/a&gt;  
            &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; icon=&quot;icon-cancel&quot;&gt;Cancel&lt;/a&gt;  
        &lt;/div&gt;  
    &lt;/form&gt;  
&lt;/div&gt;  </pre>
    </p>
    <p style="text-align:left"><img src="documentation/images/1344673773_4910.png" alt=""></p>

    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://jquery-easyui.googlecode.com/svn/trunk/share/tutorial/window/easyui-window-demo1.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-window-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>